<ion-header>
    <ion-toolbar>
        <ion-buttons slot="start">
            <ion-back-button [text]="'core.back' | translate" />
        </ion-buttons>

        <ion-title>
            <h1>{{ 'core.login.passwordforgotten' | translate }}</h1>
        </ion-title>
    </ion-toolbar>
</ion-header>
<ion-content>
    <div class="list-item-limited-width">
        @if (canContactSupport && wasPasswordResetRequestedRecently) {
            <core-login-exceeded-attempts [supportConfig]="supportConfig"
                [supportSubject]="'core.login.exceededpasswordresetattemptssupportsubject' | translate">
                {{ 'core.login.exceededpasswordresetattempts' | translate }}
            </core-login-exceeded-attempts>
        }

        <ion-list>
            <ion-item class="ion-text-wrap">
                <ion-label>{{ 'core.login.passwordforgotteninstructions2' | translate }}</ion-label>
            </ion-item>
        </ion-list>
        <ion-card>
            <form [formGroup]="myForm" (ngSubmit)="resetPassword($event)" #resetPasswordForm>
                <ion-item-divider class="ion-text-wrap">
                    <ion-label>
                        <p class="item-heading">{{ 'core.login.searchby' | translate }}</p>
                    </ion-label>
                </ion-item-divider>
                <ion-radio-group formControlName="field">
                    <ion-item>
                        <ion-radio value="username">{{ 'core.login.username' | translate }}</ion-radio>
                    </ion-item>
                    <ion-item>
                        <ion-radio value="email">{{ 'core.user.email' | translate }}</ion-radio>
                    </ion-item>
                </ion-radio-group>
                <ion-item lines="full">
                    <ion-input type="text" name="value" placeholder="{{ 'core.login.usernameoremail' | translate }}" formControlName="value"
                        autocapitalize="none" autocorrect="off" [core-auto-focus]="autoFocus"
                        [ariaLabel]="'core.login.usernameoremail' | translate" />
                </ion-item>
                <ion-button type="submit" class="ion-margin" expand="block" [disabled]="!myForm.valid">
                    {{ 'core.courses.search' | translate }}
                </ion-button>
            </form>
        </ion-card>
    </div>
</ion-content>
